<template>
  <!-- 条件筛选 -->
  <div class="page_filter" v-if="tabValue!=='monitors'">
    <!-- 搜索框 -->
    <organization-unit style="width: 300px;" v-model="proxyDeptTreeId" @change="selectOrgHandel" :changeOnSelect='true'
                       placeholder="选择管养单位" custom-class="board_select"
                       popper-class="board_select-pop"></organization-unit>

    <el-autocomplete
      @focus="haveProxyDeptTreeId('路线')"
      class="board_select" popper-class="board_select-pop"
      v-model="state"
      clearable
      :disabled="isRoad"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入路线名称或编号"
      @clear="handleClear"
      @select="handleSelect"
    ></el-autocomplete>

    <el-autocomplete
      :disabled="isslope"
      @focus="haveProxyDeptTreeId('边坡')"
      class="board_select" popper-class="board_select-pop"
      v-model="stateSlope"
      clearable
      :fetch-suggestions="querySearchAsyncSlope"
      placeholder="请输入边坡名称"
      @clear="handleClearSlope"
      @select="handleSelectSlope"
    ></el-autocomplete>
    <!--    <el-select v-model="proxyRoadId" clearable placeholder="选择路线" filterable @change="changeRoad" class="board_select" popper-class="board_select-pop">-->
    <!--      <el-option-->
    <!--        v-for="item in roadList"-->
    <!--        :key="item.id"-->
    <!--        :label="item.name"-->
    <!--        :value="item.id">-->
    <!--      </el-option>-->
    <!--    </el-select>-->
    <!--    <el-select v-model="proxySlopeId" clearable placeholder="选择边坡" @change="changeRoad"  class="board_select" popper-class="board_select-pop">-->
    <!--      <el-option-->
    <!--        v-for="item in bidSlopeList"-->
    <!--        :key="item.id"-->
    <!--        :label="item.name"-->
    <!--        :value="item.id">-->
    <!--      </el-option>-->
    <!--    </el-select>-->
  </div>
  <div class="page_filter" v-else style="margin-left: 10%;margin-top: 1vw">
    <!-- 搜索框 -->
    <!--    <organization-unit style="width: 400px;" v-model="proxyDeptTreeId"  @change="selectOrgHandel" :changeOnSelect='true' placeholder="选择管养单位" custom-class="board_select"  popper-class="board_select-pop"></organization-unit>-->

    <el-select v-model="proxyProjectId" clearable placeholder="选择项目" filterable @change="changeRoad1"
               class="board_select" popper-class="board_select-pop">
      <el-option
        v-for="item in projectList"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>

<script>
  import {projectSelect,} from '@/services/model/project-info'
  import {getRoadSelectList, getSlopeSelectList} from '@/services/model/road-mgmt'
  import OrganizationUnit from '@/components/organization-unit/all'

  export default {
    props: ['deptTreeId', 'roadId', 'slopeId','projectId'],
    components: {OrganizationUnit},
    data() {
      return {
        projectList:[],
        isRoad: false,
        isslope: false,
        restaurants: [],
        state: '',
        timeout: null,
        restaurantsSlope: [],
        stateSlope: '',
        timeoutSlope: null,
        roadList: [],
        bidSlopeList: [],
        form:{
          deptTreeId:'',
          roadId:'',
          slopeId:'',
          projectId:''
        }
      }
    },

    computed: {
      tabValue() {
        return this.$route.name
      },
      proxyProjectId: {
        get() {
          return this.projectId
        },
        set(value) {
          this.$emit('update:projectId', value)
          this.form.projectId = value
        }
      },
      proxyDeptTreeId: {
        get() {
          return this.deptTreeId
        },
        set(value) {

          this.$emit('update:deptTreeId', value)
          this.form.deptId = value
        }
      },
      proxyRoadId: {
        get() {
          return this.roadId
        },
        set(value) {
          this.$emit('update:roadId', value)
          this.form.roadId = value
        }
      },
      proxySlopeId: {
        get() {
          return this.slopeId
        },
        set(value) {
          this.$emit('update:slopeId', value)
          this.form.slopeId = value
        }
      },
    },
    methods: {
      //获取项目列表
      async getProjectList() {
        const {data} = await projectSelect(this.form.projectId)
        this.projectList = data
      },
      changeRoad1() {
        this.$forceUpdate()
        this.$emit('changeRoad')
      },

      haveProxyDeptTreeId(type) {
        if (!this.proxyDeptTreeId && type == '路线') {
          this.$message({
            message: '请先选择管养单位',
            type: 'warning'
          });
          this.isRoad = true
        } else {
          this.isRoad = false
        }
        if (type == '边坡' && !this.state) {
          this.$message({
            message: '请先选择路线',
            type: 'warning'
          });
          this.isslope = true
        } else {
          this.isslope = false

        }
      },
      // 模糊搜索路线
      querySearchAsync(queryString, cb) {
        var restaurants
        if (!queryString) {
          restaurants = [];
        } else {
          restaurants = this.restaurants;
        }
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 10 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },

      //边坡的模糊搜索
      querySearchAsyncSlope(queryString, cb) {
        var restaurants
        if (!queryString) {
          restaurants = [];
        } else {
          restaurants = this.restaurantsSlope;
        }
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        clearTimeout(this.timeoutSlope);
        this.timeoutSlope = setTimeout(() => {
          cb(results);
        }, 10 * Math.random());
      },
      // 清空路线
      handleClear() {
        this.$emit('update:roadId', '')
        this.form.roadId = ''
        this.stateSlope = ''
        this.form.slopeId = ''
        this.changeRoad()
      },
      //选择路线以后
      handleSelect(item) {
        this.$emit('update:roadId', item.id)
        this.form.roadId = item.id
        this.isslope = false
        this.changeRoad()
      },
      handleClearSlope() {
        this.$emit('update:slopeId', '')
        this.form.slopeId = ''
        this.$emit('changeRoad')
      },
      //选择边坡以后

      handleSelectSlope(item) {
        this.$emit('update:slopeId', item.id)
        this.form.slopeId = item.id
        this.$emit('changeRoad')
      },
      //选择管养单位
      selectOrgHandel() {
        this.restaurants = []
        this.restaurantsSlope = []
        this.state = ''
        this.stateSlope = ''
        this.proxyRoadId = ''
        this.proxySlopeId = ''
        this.roadList = []
        this.bidSlopeList = []
        this.isRoad = false
        this.getRoadList()
        this.$emit('changeRoad')
      },
      //获取路线列表
      async getRoadList() {
        const {data} = await getRoadSelectList(this.form)
        this.roadList = data
        let dataList = []
        this.roadList.map(x => {
          dataList.push({
            id: x.id,
            value: x.name,
            name: x.name
          })
        })
        this.restaurants = dataList
      },
      //根据标段id获取边坡列表
      async getSelectSlopeList() {
        const {data} = await getSlopeSelectList(this.form)
        this.bidSlopeList = data

        let dataList = []
        this.bidSlopeList.map(x => {
          dataList.push({
            id: x.id,
            value: x.name,
            name: x.name
          })
        })
        this.restaurantsSlope = dataList
      },
      //选择路线事件
      changeRoad() {
        this.proxySlopeId = ''
        this.bidSlopeList = []
        this.restaurantsSlope = []
        this.getSelectSlopeList()
        this.$emit('changeRoad')
      },
    },

    mounted() {
      this.$emit('update:roadId', '')
      this.$emit('update:slopeId', '')
      this.$emit('update:deptTreeId', '')
      this.state = ''
      this.proxyDeptTreeId = ''
      this.stateSlope = ''
      if(this.tabValue=='monitors'){
     this.getProjectList()
      }
    }
  }
</script>
<style lang="less">
  @import url('./init-ele-input.less');
</style>

<style lang="less" scoped>
  // select
  @select-bk: #212946;
  @select-hover: #2E3963;
  @select-choose: #547AFF;
  @select-disabled: #6F7798;
  @select-group-title: #727E9D;
  @select-group-border: #252E4E;
  @select-item-span: #D2D7ED;
  @select-choose: #5065b1;
  // select
  .board_select-pop.el-popper {
    .el-select-dropdown__item {
      background-color: @select-bk;
    }

    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
      background-color: @select-hover;
    }

    .el-select-dropdown__item.selected span,
    .el-select-dropdown__item.selected {
      color: @select-choose;
    }

    .el-select-group__title {
      color: @select-group-title;
    }

    .el-select-dropdown__item.is-disabled {
      color: @select-disabled;
    }

    .el-select-group__wrap::after {
      background-color: @select-group-border;
    }

    .el-select-dropdown__item span {
      color: @select-item-span;
    }
  }

  .board_select .el-input.is-focus .el-input__inner {
    border-color: @select-choose;
  }

  .board_select {
    margin-left: 10px;

    .is-focus .el-input__suffix .el-icon-arrow-up {
      color: @select-choose;
    }
  }

  .page_filter {
    display: inline-block;
    position: absolute;
    left: 24%;
    top: 14%;
    z-index: 2;
  }
</style>
